import React, { Component } from 'react'
import Dtails from './Dtails'
import { Link, Route, Switch } from 'react-router-dom'

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' },
    ],
  }
  render() {
    console.log(this.props);
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((item) => {
              return <li key={item.id}>
                {/* <a href="XX">{item.title}</a> */}
                {/* 向路由传递params参数 */}
                <Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>
                {/*   向路由传递query参数
                <Link to={`/home/message/detail/?id=${item.id}&${item.title}`}>{item.title}</Link> */}
                {/*   向路由传递state参数
                <Link to={{ pathname: '/home/message/detail', state: { id: item.id, title: item.title } }}>{item.title}</Link> */}
              </li>
            })
          }
        </ul>
        <hr />
        {/* <Dtails></Dtails> */}
        <Switch>
          {/* 声明接受params参数 */}
          <Route path="/home/message/detail/:id/:title" component={Dtails}></Route>
          {/* 声明接受query参数
          <Route path="/home/message/detail" component={Dtails}></Route> */}
          {/*  声明接受state参数
          <Route path="/home/message/detail" component={Dtails}></Route> */}
        </Switch>
      </div >
    )
  }
}
